<template>
  <div id="appRef" ref="appRef">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
// * 默认缩放值
const scale = reactive({
  width: "1",
  height: "1",
});

// * 设计稿尺寸（px）
const baseWidth = 1920;
const baseHeight = 1080;

// * 需保持的比例
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));

let drawTiming = ref(null);
const appRef = ref();
const calcRate = () => {
  if (!appRef.value) return;
  // 当前宽高比
  const browserRoom = getZoom();
  // 当前宽高比
  /**
   * 1. 先将宽高乘上浏览器缩放倍数x
   * 2. 再将整个页面用scale缩放 1/x 倍
   * 在视觉上，就感觉页面没有缩放
   */
  // 宽高
  const w = window.innerWidth * browserRoom;
  const h = window.innerHeight * browserRoom;
  // scale缩放比例
  const scl = parseFloat((1 / browserRoom).toFixed(5));

  // 页面重绘处理
  appRef.value.style.width = `${w}px`;
  appRef.value.style.height = `${h}px`;
  appRef.value.style.transform = `scale(${scl}, ${scl}) translate(-50%, -50%)`;
};
const getZoom = () => {
  let ratio = 0,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase();
  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio;
  } else if (~ua.indexOf("msie")) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (
    window.outerWidth !== undefined &&
    window.innerWidth !== undefined
  ) {
    ratio = window.outerWidth / window.innerWidth;
  }
  if (ratio) {
    ratio = Math.round(ratio * 100);
  }
  return parseFloat(ratio / 100).toFixed(2);
};
// 窗口大小变化
const resize = () => {
  clearTimeout(drawTiming.value);
  drawTiming.value = setTimeout(() => {
    calcRate();
  }, 200);
};

onMounted(() => {
  calcRate();
  window.addEventListener("resize", resize);
});
onUnmounted(() => {
  window.removeEventListener("resize", resize);
});
</script>

<style scoped>
#appRef {
  width: 1920px; /* 设计图宽 */
  height: 1080px; /* 设计图高 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  background-color: black;
  color: #fff;
  /* overflow: hidden; */
}
.top {
  height: 6%;
  display: flex;
  justify-content: space-around;
}
.body {
  height: 94%;
  display: flex;
}
.left {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 30%;
}
.middle {
  width: 100%;
  width: 40%;
}
.right {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 30%;
}
</style>
